<template>
  <div class="app-container">
    <el-tabs v-model="status" type="card" @tab-click="handleClickStatus">
      <el-tab-pane name="-1">
        <span slot="label"><i class="el-icon-s-order"></i> 全部订单</span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-bank-card"></i> 待付款</span>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label"><i class="el-icon-refrigerator"></i> 待收货</span>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label"><i class="el-icon-truck"></i> 已完成</span>
      </el-tab-pane>
      <el-tab-pane name="4">
        <span slot="label"><i class="el-icon-document"></i> 退款</span>
      </el-tab-pane>
    </el-tabs>
    <div class="flexed searchbox">
      <div><span>是否支付: </span><el-select v-model="orderInfo.isPay" placeholder="是否支付" style="width: 160px;">
          <el-option label="未支付" value="0"></el-option>
          <el-option label="已支付" value="1"></el-option>
        </el-select></div>

      <div><span>订单编号: </span> <el-input v-model="orderInfo.orderNo" placeholder="请输入订单编号" style="width: 200px;"></el-input></div>
      <div><span> 日期: </span> <el-date-picker v-model="value2"  value-format="yyyy-MM-dd HH:mm:ss" style="width: 360px;" type="datetimerange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="selectTime">
        </el-date-picker></div>
      <div> <el-button icon="el-icon-search" type="primary" size="small" @click="searchInput">搜索</el-button>
        <el-button icon="el-icon-delete" size="small" @click="clearSearch">重置</el-button>
      </div>
    </div>

    <el-table :data="tableData" stripe border style="width: 100%" v-loading="loadings">
      <el-table-column label="商品信息" width="400">
        <template slot-scope="scope">
          <div class="msg-shops flexed">
            <el-image style="width: 70px; height: 70px;margin-right: 30px;" :src="scope.row.picUrl" fit="cover"></el-image>
            <div>{{ scope.row.spuName }}</div>
            <div style="flex: 1;text-align: right;padding-right: 40px;">
              <div style="color: red;">￥{{scope.row.salesPrice}}</div>
              <div>×{{scope.row.quantity}}件</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="时间/订单编号"  width="200">
        <template slot-scope="scope" width="250">
           <div>{{ scope.row.createTime }}</div>
           <div>{{ scope.row.orderNo }}</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="200">
        <template slot-scope="scope">
          <div>订单状态：<span class="status-box" style="background-color: red;">{{ scope.row.status=='1'?'待付款':scope.row.status=='2'&&scope.row.logisticsNo==null?'待发货':scope.row.status=='2'&&scope.row.logisticsNo!=null?'已发货/待收':scope.row.status=='3'?'已完成':scope.row.status=='3'?'已完成':scope.row.refundStatus
=="SUCCESS"?'已退款':'退款中'}}</span></div>
           <div style="margin-top: 10px;">支付状态：<span class="status-box" :style="{backgroundColor:(scope.row.isPay=='0'?'red':'green')}">{{ scope.row.isPay=='0'?'未支付':'已支付' }}</span></div>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" width="200">
        <template slot-scope="scope">
           <div>订单金额:￥{{ scope.row.paymentPrice }}</div>
           <div style="color: red;">支付金额:￥{{ scope.row.paymentPrice }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="paymentTime" label="付款时间"></el-table-column>
      <el-table-column  label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small" icon="el-icon-edit">订单详情</el-button>
          <el-button v-if="scope.row.status=='2'&&scope.row.logisticsNo==null" @click="showDialogLogistics(scope.row,scope.index)" type="text" size="small" icon="el-icon-s-promotion">发货</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>
 <el-pagination
  :hide-on-single-page="false"
  @current-change="handleCurrentChange"
  :total="totals"
  :page-size="orderInfo.size"
  :current-page="orderInfo.current"
  style="float: right;"
  layout="prev, pager, next">
</el-pagination>
</div>
      <el-dialog title="发货" :visible.sync="dialogLogistics" width="30%">
        <avue-form :option="logisticsOption" v-model="logisticsForm" @submit="delivery"></avue-form>
      </el-dialog>
    <el-drawer
      title="详情查看"
      :visible.sync="drawer"
      direction="rtl"
      size="60%"
      >
  <div style="width: 100%;padding: 20px;box-sizing: border-box;">
    <el-divider content-position="left"><i class="el-icon-s-order"></i>基本信息</el-divider>
    <div class="box-detail">
      <el-table :data="[activeItem]" stripe border style="width: 100%">
      <el-table-column prop="orderNo" label="订单单号"></el-table-column>
      <el-table-column prop="paymentPrice" label="订单金额" width="80"></el-table-column>
      <el-table-column label="订单时间">
        <template slot-scope="scope">
           <div>创建时间:{{ scope.row.createTime }}</div>
           <div v-if="scope.row.status!='1'">付款时间:{{ scope.row.paymentTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
           <div>订单状态：<span class="status-box" style="background-color: red;">{{ scope.row.status=='1'?'待付款':scope.row.status=='2'&&scope.row.logisticsNo==null?'待发货':scope.row.status=='2'&&scope.row.logisticsNo!=null?'已发货/待收':scope.row.status=='3'?'已完成':scope.row.status=='3'?'已完成':scope.row.refundStatus
=="SUCCESS"?'已退款':'退款中'}}</span></div>
           <div style="margin-top: 10px;">支付状态：<span class="status-box" :style="{backgroundColor:(scope.row.isPay=='0'?'red':'green')}">{{ scope.row.isPay=='0'?'未支付':'已支付' }}</span></div>
        </template>
      </el-table-column>
      <el-table-column prop="transactionId" label="支付流水号"></el-table-column>
      </el-table>
    </div>
    <el-divider content-position="left"><i class="el-icon-user"></i>用户信息</el-divider>
    <div class="box-detail">
      <el-table :data="[activeItem]" stripe border style="width: 100%" >
        <el-table-column label="用户名">
          <template slot-scope="scope">
           <div><el-image style="width: 70px; height: 70px;margin-right: 30px;" :src="scope.row.headimgUrl" fit="cover"></el-image></div>
           <div>{{ scope.row.wxUserName }}</div>
        </template>
        </el-table-column>
        <el-table-column prop="wxUserId" label="用户编号"></el-table-column>
      </el-table>
    </div>
    <el-divider content-position="left"><i class="el-icon-c-scale-to-original">商品信息</i></el-divider>
    <div class="box-detail">
      <el-table :data="[activeItem]" stripe border style="width: 100%" >
        <el-table-column prop="paymentTime" label="图片">
          <template slot-scope="scope">
            <el-image style="width: 70px; height: 70px;margin-right: 30px;" :src="scope.row.picUrl" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="spuName" label="商品名"></el-table-column>
        <el-table-column prop="salesPrice" label="商品单价"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="paymentPrice" label="商品总价"></el-table-column>
        <el-table-column prop="paymentPrice" label="支付金额"></el-table-column>
      </el-table>
    </div>
    <el-divider content-position="left"><i class="el-icon-takeaway-box" v-if="activeItem.status!='1'">收货信息</i></el-divider>
    <div class="box-detail" v-if="activeItem.status!='1'">
      <el-table :data="[activeItem]" stripe border style="width: 100%" >
        <el-table-column prop="address" label="收货地址"></el-table-column>
        <el-table-column prop="userName" label="收货人姓名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="logisticsNo" label="快递单号" v-if="activeItem.logisticsNo"></el-table-column>
      </el-table>
    </div>
  </div>
</el-drawer>
  </div>
</template>

<script>
// import {checkPermi, checkRole} from "@/utils/permission"
import { getPage, putObj} from '@/api/mall/orderinfo'
export default {
  name: 'orderinfo',
  data() {
    return {
      orderInfo: {
        current: 1,
        size: 8,
        descs: 'create_time',
        status: '',
        ascs: [],//升序字段
        beginTime: '',
        endTime: '',
        orderNo:'',
        isPay:''
      },
      logisticsForm: {
          logistics: null,
          logisticsNo: null,
          address: null,
          logisticsId:null
        },
        logisticsOption: {
          emptyBtn: false,
          card: true,
          group: [
            {
              icon: 'el-icon-user',
              label: '收货人信息',
              prop: 'group1',
              column: [{
                label: '收货人名字',
                prop: 'userName',
                span: 24,
                readonly: true
              }, {
                label: '电话号码',
                prop: 'telNum',
                span: 24,
                readonly: true
              }, {
                label: '收货地址',
                prop: 'address',
                type: 'textarea',
                span: 24,
                readonly: true
              }]
            }, {
              icon: 'el-icon-truck',
              label: '快递信息',
              prop: 'group2',
              column: [{
                label: '快递公司',
                prop: 'logistics',
                dicUrl: '/orderlogistics/dict/LOGISTICS',
                span: 24,
                type: 'select',
                rules: [{
                  required: true,
                  message: "请选择快递公司",
                  trigger: "blur"
                }]
              },
                {
                  label: '快递单号',
                  prop: 'logisticsNo',
                  span: 24,
                  rules: [{
                    required: true,
                    message: "请输入快递单号",
                    trigger: "blur"
                  }]
                }]
            }
          ]
        },
      drawer:false,
      status:'-1',
      totals:0,
      loadings:false,
      value2: [],
      tableData: [],
      dialogLogistics: false,
      activeItem:{},
    }
  },
  created() {
    this.getOrderlist()
  },
  methods: {
    async getOrderlist() {
      this.loadings = true
      let res = await getPage(this.orderInfo)
      console.log(res)
      if(res.code!=200)return
      this.tableData = res.data.data
      this.totals = res.data.total
      console.log(this.totals)
      this.loadings = false
    },
    handleClickStatus(tab, event) {
      console.log(typeof tab.name)
      this.orderInfo.status = tab.name
      if(tab.name == '-1'){
        this.orderInfo.status = ''
      }
      this.orderInfo.current = 1
      this.getOrderlist()
    },
    handleClick(e){
       this.activeItem=e;
       this.drawer = true
    },
    handleCurrentChange(val){
      this.orderInfo.current = val;
      this.getOrderlist()
    },
    selectTime(e){
      if(e==null){
        this.orderInfo.beginTime="";
        this.orderInfo.endTime = ""
      }else{
        this.orderInfo.beginTime=e[0];
        this.orderInfo.endTime = e[1]
      }
      console.log(e)
    },
    searchInput(){
        // console.log(this.orderInfo)
        this.orderInfo.current = 1
        this.getOrderlist()
    },
    clearSearch(){
      this.orderInfo.current = 1
      this.orderInfo.beginTime= ''
      this.orderInfo.endTime= ''
      this.orderInfo. orderNo=''
      this.orderInfo.isPay=''
      this.value2 = ''
      this.getOrderlist()
    },
    showDialogLogistics(row, index, done) {
        this.logisticsForm.address = row.address
        this.logisticsForm.userName = row.userName
        this.logisticsForm.telNum = row.phone
        this.logisticsForm.orderNo = row.orderNo
        this.logisticsForm.logisticsId =  row.logisticsId
        this.dialogLogistics = true
      },
    delivery(form, done) {
      // console.log(form)
        let row = {}
          row.logisticsId = form.logisticsId
          row.logistics = form.$logistics
          row.logisticsNo = form.logisticsNo
          row.orderNo = form.orderNo
          console.log(row)
          putObj(row).then(data => {
          this.$message({
            showClose: true,
            message: '发货成功',
            type: 'success'
          })
          done()
          this.dialogLogistics = false
          this.getOrderlist()
        }).catch(() => {
          done()
        })
      },
  }
}
</script>
<style>
.flexed {
  display: flex;
  align-items: center;
}

.searchbox {
  width: 100%;
  justify-content: space-around;
  margin: 30px 0;
  font-size: 12px;
}
.status-box{
  display: inline-block;
  border-radius: 3px;
  padding: 3px;
  color: white;
}
</style>
